<template>
  <div class="home">
    <div class="plus"></div>
    <van-search v-model="value" placeholder="请输入商品名称" shape="round" @click="showO">
      <template #left>
        <div v-if="userInfo.length !== 0" class="message">
          <span>{{ time }}好</span><strong class="one-text">{{ userInfo.nickName }}</strong>
        </div>
        <div v-else class="message"><p @click="goLogin">请先登录</p></div>
      </template>
    </van-search>
    <div class="box">
      <van-swipe :autoplay="3000" indicator-color="#ffa341">
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img class="img" :src="item.bannerImg" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="tag">
        <div class="title">热卖推荐</div>
      </div>
      <div class="productBox">
        <ul>
          <li
            v-for="(item, index) in typeProductData"
            :key="index"
            @click="goDetail(item)"
          >
            <Product :data="item" />
          </li>
        </ul>
      </div>
    </div>
    <van-overlay class="overlay" :show="showOverlay" z-index="999" :lock-scroll="false">
      <Search @hiddenOverlay="showOverlay = false; s = false" :show="s" />
    </van-overlay>
  </div>
</template>

<script>
import Product from "../components/Product.vue";
import Search from "../components/Search.vue";

export default {
  name: "Home",

  components: {
    Product,
    Search
  },

  data() {
    return {
      // 用户信息
      userInfo: [],
      // 搜索框
      value: "",
      // 时间
      time: "",
      // 轮播图图片
      images: [],
      // 热卖商品
      typeProductData: [],
      // 显示遮罩层
      showOverlay: false,
      // 控制搜索框自动聚焦，组件内监听这个值的变化
      s: false
    };
  },

  created() {
    // 在session storage中存储tabbar的状态
    this.$util.setSessionItem("tabbarActive", 0);

    // 获取我的用户信息
    this.getMyUserInfo();

    // 获取轮播图图片
    this.getImages();

    // 获取热卖商品
    this.getTypeProductData("isHot", 0);
  },

  methods: {
    // 显示搜索层
    showO(event) {
      event.preventDefault();
      this.s = true;
      this.showOverlay = true;
    },

    // 获取我的用户信息
    getMyUserInfo() {
      let tokenString = this.$cookies.get("TOKEN");
      this.axios
        .get("findMy", {
          params: {
            tokenString,
          },
        })
        .then((res) => {
          if (res.data.code === "A001") {
            this.userInfo = res.data.result[0];
            //
            // 计算当前时间
            let time = new Date().getHours();
            let str = "";
            if (time >= 6 && time < 12) {
              str = "早上";
            } else if (time >= 12 && time < 18) {
              str = "下午";
            } else if (time >= 18 && time < 24) {
              str = "晚上";
            } else {
              str = "深夜";
            }
            this.time = str;
          }
        })
        .catch((err) => {});
    },

    // 请先登录
    goLogin() {
      this.$router.replace({ name: "Login" });
    },

    // 获取轮播图图片
    getImages() {
      this.axios
        .get("banner", {})
        .then((res) => {
          if (res.data.code === 300) {
            this.images = res.data.result;
          }
        })
        .catch((err) => {});
    },

    // 获取指定分类的商品数据
    getTypeProductData(type, index) {
      // 设置分类栏当前索引值
      this.$util.setSessionItem("typeProductActive", index);

      // 获取缓存数据
      let cacheData = localStorage.getItem("cacheProduct");
      // 判断是否存在缓存数据
      // 存在则转换数据类型为json对象（因为数据是字符串），否则初始化为空对象
      cacheData = cacheData ? JSON.parse(cacheData) : {};
      // 获取当前时间
      let currentTime = new Date().getTime();
      // 判断缓存是否过期
      // 缓存数据中存在过期时间，并且当前时间减去缓存中的过期时间不超出数据指定有效时长
      if (cacheData.expires && currentTime - cacheData.expires < 60 * 1000) {
        // 判断当前类型的商品数据是否存在
        if (cacheData[type]) {
          // 如果存在且未过期则使用缓存数据，并退出请求
          this.typeProductData = cacheData[type];
          return;
        }
      } else {
        // 如果过期则清空缓存对象
        cacheData = {};
      }
      let key = "";
      let value = "";
      // 如果请求类型为热卖推荐，则需要自定义请求参数
      if (type === "isHot") {
        key = type;
        value = 1;
      } else {
        key = "type";
        value = type;
      }
      // 请求数据
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key,
          value,
        },
      })
        .then((res) => {
          //
          let data = res.data;
          if (data.code === 500) {
            // 将请求回来的商品数据添加到data
            this.typeProductData = data.result;
            // 判断缓存对象中是否存在过期时间
            if (!cacheData.expires) {
              // 在缓存对象中添加一个当前时间（用以判断数据有效时间）
              cacheData.expires = new Date().getTime();
            }
            // 将请求的数据添加到缓存对象中（key为请求的商品类型）
            cacheData[type] = data.result;
            // 将缓存对象转成字符串并存入localstorage（key为cacheProduct）
            localStorage.setItem("cacheProduct", JSON.stringify(cacheData));
          }
        })
        .catch((err) => {});
    },

    // 去商品详情页
    goDetail(item) {
      // 
      this.$router.push({name: 'Detail', query: {
        pid: item.pid
      }});
    },
  },
};
</script>

<style lang="less" scoped>
.searchProduct {
  // padding: 10px;
  height: 100%;
    background: #fff;
  ul {
    display: grid;
    grid-template-columns: repeat(3, calc(33.33333% - 12px));
    justify-content: space-evenly;
    padding: 10px 0;
    // grid-template-columns: repeat(3, 33.33333%);
    gap: 10px 0;
    text-align: center;
  }
}

.productBox {
  padding-bottom: 50px;
  ul {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 5px));
    gap: 10px;
    padding-top: 10px;
    li {
      position: relative;
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      box-sizing: border-box;
      &::after {
        position: absolute;
        top: 0;
        left: 20px;
        display: block;
        width: 24px;
        background: #ff594d;
        color: #fff;
        line-height: 20px;
        font-size: 10px;
        text-align: center;
        content: "hot";
        transform: translateY(50%);
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
      }
    }
  }
}

.tag {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding: 10px 0;
  background: #fff;
  .title {
    padding: 0 15px;
    background: #ff594d;
    color: #fff;
    line-height: 30px;
    border-top-right-radius: 15px;
  }
}

/deep/.van-swipe {
  height: 250px;
  border-radius: 10px;
}
.img {
  display: block;
  width: 100%;
  height: 100%;
}

/deep/.van-swipe__indicators {
  left: 100%;
  margin-left: -15px;
  transform: translateX(-100%);
}
/deep/.van-swipe__indicator {
  width: 10px;
  height: 3px;
  border-radius: 3px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.message {
  display: flex;
  align-items: center;
  font-size: 14px;
  strong {
    display: block;
    margin: 0 10px;
    max-width: 60px;
    color: #ff594d;
  }
  p {
    margin: 0;
    margin-right: 10px;
    color: #ffa341;
  }
}
.box {
  padding: 10px;
}
// .overlay {
//   margin-top: 28px;
// }
</style>